<template>
	<div class="lietou-detail content">
    <div class="detail-bg"></div>
		<div class="lietou-right">
      <div class="head">
        {{fatherName}}
        <el-button plain class="back" @click="backpage">返回上一页</el-button>
      </div>
      <div class="lietou-detail-head">
        <el-form ref="form" :inline="true" label-width="90px" size="small">
          <el-form-item>
            <el-button @click="creatClassHandle('')" class="buttonStyle">创建职业</el-button>
          </el-form-item>
        </el-form>
        <el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable"
         :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'46px'}"
         :highlight-current-row="true">
          <el-table-column fixed type="index" label="序列" column-key="id" align="center" width="150"></el-table-column>
          <el-table-column prop="jname" label="分类名称" align="center"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="success" size="small" class="buttonStyle2" @click="creatClassHandle(scope.row.jname, scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name: 'PositionEditTree',
		data() {
			return {
				tableData: [], //表格数据
				pid:'',
				fatherName:''
			}
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		async created() {
			this.pid = this.$route.query.pid;
			this.fatherName = this.$route.query.name;
		   this.loadData();
		},
		methods:{
			// 创建分类
			creatClassHandle(name, id){
				this.$prompt('请输入职位名称：', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValue: name,
					// inputPattern:  /^\w+$/,
					inputValidator: (val) => {
						return val!=''?true:false
					},
					inputErrorMessage: '请输入职位名称',
					inputPlaceholder:'请输入职位名称',
					closeOnHashChange: false,
					closeOnClickModal: false
				}).then(({ value }) => {
					this.submitHandle(value, id);
				}).catch(action => {
            
				});
			},
			// 提交操作
			async submitHandle(value, id){
				try {
					let res = await this.$http({
						url: '/man/Jobcat/setInfo',
						method: 'post',
						params: {
							"token": this.token,
							"id":	id==undefined?'':id,//新增为空 编辑写值	
							"pid": this.pid,	//顶层写0 二级写上级	13
							"jname":	value	//职位名称
						}
					});
					this.$message({
						type: 'success',
						message: '操作成功！'
					});
					this.loadData();
				} catch (e) {
					console.log(e)
				}
			},

			async loadData() {
			  const loading = this.$loading({
			    lock: true,
			    text: 'Loading',
			    spinner: 'el-icon-loading',
			    background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
			    let res = await this.$http({
			      url: '/man/Jobcat/getList',
			      method: 'post',
			      params: {
			      	"token": this.token,
			      	"pid": this.pid
			      }
			    });
					this.tableData = res.data;
			    loading.close();
			  } catch (e) {
			    console.log(e)
			    loading.close();
			  }
			},

      backpage(){
      	this.$router.go(-1);
      }
		}
	}
</script>

<style lang="scss" scoped="scoped">
  .lietou-detail{
  	// background-color: #f4f4f4;
  	background-color: rgb(240, 242, 245);
  	position: relative;

  	.detail-bg {
  	  position: fixed;
  	  top: 0px;
  	  left: 0;
  	  bottom:0;
  	  right: 0;
  	  background: #f4f4f4;
  	}

  }
  .lietou-detail-head{
  	background-color: #fff;
  	padding:15px 20px 25px;
  	position: relative;
  	min-width:800px;
  }
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 13px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
  .el-button.buttonStyle2{
    height: 32px;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    border-radius: 5px;
    border:0;
    margin-left:20px;
    margin-top:2px;
  }
	.answerTable{
		margin-top:5px;
	}
	.lietou-right{
		margin-top:15px;
	}
  .head{
    font-size:13px;
    margin-bottom:15px;
    color:#444;
    font-weight: 700;
    position: relative;
    line-height:20px;
  }
  .back{
     float:right;
  	padding: 8px 12px;
  	font-size: 12px;
  	margin-right:5px;
  	margin-top: -8px;
  }
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
